<!-- ignore the following lines, they are not important to this demo -->
<jigsaw-demo-description [summary]="summary" [content]="description">
</jigsaw-demo-description>


<!-- start to learn the demo from here -->
<p>预设颜色</p>
<div id="type-list">
    <jigsaw-button>Default</jigsaw-button>

    <jigsaw-button colorType="primary">Primary</jigsaw-button>

    <jigsaw-button colorType="warning">Warning</jigsaw-button>

    <jigsaw-button colorType="error">Error</jigsaw-button>

    <jigsaw-button colorType="danger">Danger</jigsaw-button>
</div>

<br>
<br>
<br>
<p>另一种写法</p>
<a jigsaw-button >Default</a>

<a jigsaw-button  colorType="primary">Primary</a>

<a jigsaw-button  colorType="warning">Warning</a>

<a jigsaw-button  colorType="error">Error</a>
<br>
<br>
<br>
<p>预设尺寸</p>
<br>
<p>当前尺寸: {{size || "default"}}</p>

<div id="presize-list">
<jigsaw-button id="test-button" [preSize]="size" colorType="primary" (click)="changeSize('small')">Small</jigsaw-button>

<jigsaw-button [preSize]="size" colorType="primary" (click)="changeSize()">Default</jigsaw-button>

<jigsaw-button [preSize]="size" colorType="primary" (click)="changeSize('large')">Large</jigsaw-button>
</div>

<br>
<p>另一种写法</p>
<br>
<p>当前尺寸: {{aSize || "default"}}</p>
<br>
<a jigsaw-button [preSize]="aSize" colorType="primary" (click)="changeASize('small')">Small</a>

<a jigsaw-button [preSize]="aSize" colorType="primary" (click)="changeASize()">Default</a>

<a jigsaw-button [preSize]="aSize" colorType="primary" (click)="changeASize('large')">Large</a>
